<template>
  <div class="screen-main">
    <div class="screen-nav">
      <div class="nav-list">
        <div class="nav-item" @click="changeIndex(0)">
          <a>人员大屏</a>
        </div>
        <div class="nav-item" @click="changeIndex(1)">
          <a>活动大屏</a>
        </div>
        <div class="nav-item" @click="changeIndex(2)">
          <a>物资大屏</a>
        </div>
      </div>
      <h1 v-if="screenIndex == 0">社团会员可视化大屏</h1>
      <h1 v-if="screenIndex == 1">社团活动可视化大屏</h1>
      <h1 v-if="screenIndex == 2">社团物资可视化大屏</h1>
      <!-- 全屏 -->
      <div class="icon-box" @click="screenfull.toggle()">
        <!-- <svg-icon icon-class="header-full-screen" class="icon" /> -->
        <div class="nav-item" @click="changeIndex(2)">
          <a>全屏</a>
        </div>
      </div>
    </div>
    <PersonScreen v-if="screenIndex == 0" />
    <ActivityScreen v-if="screenIndex == 1" />
    <GoodsScreen v-if="screenIndex == 2" />
  </div>
</template>
<script lang="ts" setup>
// 人员大屏
import PersonScreen from './components/person.vue'
// 活动大屏
import ActivityScreen from './components/activity.vue'
// 物资大屏
import GoodsScreen from './components/goods.vue'
// 全屏
import screenfull from "screenfull";
import { ref } from 'vue';

const screenIndex = ref(0)
const changeIndex = (val: number) => {
  screenIndex.value = val
}

</script>
<style lang="scss" scoped>
.screen-main {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  min-height:0;
  overflow: auto;
  background-image: url('@/assets/imgs/screen/bkg.jpg');
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  background-color: #464646;

  display: grid;
  grid-template-rows: 8rem auto;

  .screen-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    .nav-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      padding: 0 10rem;

      .nav-item {
        font-size: 2rem;
        place-self: center;
      }

      .nav-item {
        background-image: linear-gradient(to top, #0B2225 0%, #00FFFF 100%);
        width: 12rem;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        transform: skewX(-35deg);
        cursor: pointer;

        &:hover {
          background-image: linear-gradient(to top, #e97e0be4 0%, #ff8c0076 100%);
        }
      }

      .nav-item>a {
        display: block;
        color: #ccc;
        transform: skewX(35deg);
      }
    }

    h1 {
      place-self: center;
      color: #28FFFE;
    }

    .icon-box {
      padding: 0 8rem;
      justify-self: right;
      align-self: center;
      font-size: 2rem;
      font-weight: 700;

      .nav-item {
        background-image: linear-gradient(to top, #0B2225 0%, #00FFFF 100%);
        width: 12rem;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        transform: skewX(-35deg);
        cursor: pointer;

        &:hover {
          background-image: linear-gradient(to top, #e97e0be4 0%, #ff8c0076 100%);
        }
      }

      .nav-item>a {
        display: block;
        color: #ccc;
        transform: skewX(35deg);
      }
    }

    .icon {
      width: 2rem;
      height: 2rem;
      background-color: #fff;
    }
  }
}
</style>
